<template>
<div class="todo-footer">
<label>
    <input type="checkbox" v-model="ischeckAll">
</label>
<span><span>已完成{{count}}</span>/ 全部{{todos.length}}</span>
<button class="btn-danger" @click="clearAllCompletedTodos">清除已完成任务</button>
</div>
</template>
<script lang="ts">
import { Todo } from '@/types/todo'
import {computed, defineComponent} from 'vue'
export default defineComponent({
    name:'MyFooter',
    props:{
        todos:{
            type:Array as ()=> Todo [],
            required:true
        },
        checkAll:{
            type:Function,
            required:true
        },
        clearAllCompletedTodos:{
            type:Function,
            required:true
        }
    },
    setup(props){
        const count = computed(()=>{
            return props.todos.reduce((pre,todo,index)=>pre+(todo.isCompleted?1:0),0)
        })
        const ischeckAll = computed({
            get(){
                return count.value > 0 && count.value === props.todos.length
            },
            set(val){
                props.checkAll(val)
            }
        })
        return{
            count,
            ischeckAll
        }
    }
})
</script>

<style scoped>
.todo-footer{
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
}
.todo-footer label{
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}
.todo-footer label input{
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}
.todo-footer button{
    float: right;
    margin-top: 5px;
}
</style>>
    